<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            .page {
              position: absolute;
              width: 100%;
              height: 100%;
              /*activate the GPU for compositing each page */
              -webkit-transform: translate3d(0, 0, 0);
            }
            .stage-left {
              /*left: -480px;*/
              left: -100%;
            }

            .stage-right {
               /*left: 480px;*/
              left: 100%;
            }

            .stage-center {
              top: 0;
              left: 0;
            }
            /* iOS/android phone landscape screen width*/
            /* @media screen and (max-device-width: 480px) and (orientation:landscape) {
              .stage-left {
                left: -480px;
              }
            
              .stage-right {
                left: 480px;
              }
            
              .page {
                width: 480px;
              }
            } */
        </style>
    </head>
    <body>
        <div id="home-page" class="page">
          <h1>Home Page</h1>
        </div>

        <div id="products-page" class="page stage-right">
          <h1>Products Page</h1>
        </div>

        <div id="about-page" class="page stage-left">
          <h1>About Page</h1>
        </div>
        <script>
            function getElement(id) {
              return document.getElementById(id);
            }
            var FOCUS_PAGE = null;
            // FOCUS_PAGE=getElement('home-page');

            function slideTo(id) {
              //1.) the page we are bringing into focus dictates how
              // the current page will exit. So let's see what classes
              // our incoming page is using. We know it will have stage[right|left|etc...]
              var classes = getElement(id).className.split(' ');

              //2.) decide if the incoming page is assigned to right or left
              // (-1 if no match)
              var stageType = classes.indexOf('stage-left');

              //3.) on initial page load focusPage is null, so we need
              // to set the default page which we're currently seeing.
              if (FOCUS_PAGE == null) {
                // use home page
                FOCUS_PAGE = getElement('home-page');
              }

              //4.) decide how this focused page should exit.
              if (stageType > 0) {
                FOCUS_PAGE.className = 'page transition stage-right';
              } else {
                FOCUS_PAGE.className = 'page transition stage-left';
              }

              //5. refresh/set the global variable
              FOCUS_PAGE = getElement(id);

              //6. Bring in the new page.
              FOCUS_PAGE.className = 'page transition stage-center';
            }
            function initEvent(ele){
                getElement(ele).onclick=function(){
                  var index=arr.indexOf(ele)+1;
                  if(index === 3){
                    index=1;
                  }
                  slideTo(arr[index]);
                }
            }
            var arr=['home-page','products-page','about-page'];
            for(var i=0;i<3;i++){
              initEvent(arr[i]);
            }
            // initEvent('home-page');
            // initEvent('products-page');
            // initEvent('about-page');
        </script>
    </body>
</html>